<template>
  <div class="back-container">
    <!-- 右侧视频相关部分 -->
    <div class="online-right">
      <div class="playback-content" ref="playBackDom">
        <div ref="videoDomBox" class="video-dom">
          <video
            id="videoElement"
            ref="myPlayerBackOpenRef"
            class="video-js vjs-default-skin"
            muted
          >
            <!-- <source type="application/x-mpegURL" /> -->
          </video>
          <div class="custom-error-message" style="display: none">
            <span>视频加载失败</span>
          </div>
          <div v-show="isVideoShow" class="video-title">
            <div class="l-t"></div>
            <div class="r-t">
              <img
                v-show="playStatus === 'pause'"
                @click="handlePlay"
                src="@/assets/video/i7.png"
                alt=""
              />
              <img
                v-show="playStatus === 'play'"
                @click="handlePause"
                src="@/assets/video/i1.png"
                alt=""
              />
              <img
                v-show="!isFullscreen"
                @click="handleFullscreen"
                src="@/assets/video/i6.png"
                alt=""
              />
              <img
                v-show="isFullscreen"
                @click="handleFullscreen"
                src="@/assets/video/i9.png"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="onCancel">关 闭</el-button>
    </span>
  </div>
</template>

<script>
import "video.js/dist/video-js.min.css";
import flvjs from "flv.js";
// import { playback } from "@/api/video/playbackVideoApi";
export default {
  name: "BackView",
  props: {
    dialogVisibleUse: {
      type: Boolean,
      default: false,
    },
    openVideoData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  components: {},
  data() {
    return {
      // 视频的数据
      videoId: "",
      nowMonthFlag: false,
      startTime: "", // 接口返回的开始回放时间
      endTime: "", // 给一个默认的2分钟之后的回放时间
      myPlayerOpenBack: "",
      playStatus: "play", // 刚开始不显示
      isFullscreen: false,
      isVideoShow: false, //视频的控制按钮
      streamType: "video/x-flv",
      linVideoUrl: "", //存储视频的url,为了掩饰写死格式
    };
  },
  mounted() {
    if (this.openVideoData?.id) {
      this.videoId = this.openVideoData.id;
      this.startTime = this.openVideoData.timestamp;
      this.endTime = this.handleGetEndTime();
      this.playback();
    } else {
      this.$message.warning("暂无视频");
    }
  },
  methods: {
    // 报警时间后的5分钟时间点
    handleGetEndTime() {
      let linTime = new Date(this.startTime);
      linTime.setTime(linTime.getTime() + 5 * 60 * 1000); // 更新时间为5分钟后
      let currentTime = linTime; // 获取更新后的时间戳
      return (
        currentTime.getFullYear() +
        "-" +
        ("0" + (currentTime.getMonth() + 1)).slice(-2) +
        "-" +
        ("0" + currentTime.getDate()).slice(-2) +
        " " +
        ("0" + currentTime.getHours()).slice(-2) +
        ":" +
        ("0" + currentTime.getMinutes()).slice(-2) +
        ":" +
        ("0" + currentTime.getSeconds()).slice(-2)
      );
    },
    // 获取到回放视频
    async playback() {
      console.log(this.endTime, "给接口的时间数据", this.startTime);
      // const { message, state, data } = await playback({
      //   id: this.videoId,
      //   startTime: this.startTime,
      //   endTime: this.endTime,
      // });
      // if (state === 1) {
      //   console.log(data, "99999");
      //   this.linVideoUrl = "http://10.194.185.226:5001" + data;
      //   this.initVideo();
      // } else {
      //   this.$message.error(message);
      // }
    },

    // 初始化视频
    initVideo() {
      let that = this;
      console.log(that.linVideoUrl, "0-0-0-");
      if (that.myPlayerOpenBack) {
        that.myPlayerOpenBack.pause(); // 暂停视频播放
        that.myPlayerOpenBack.unload(); // 卸载视频资源
        that.myPlayerOpenBack.detachMediaElement(); // 解绑视频元素
        that.myPlayerOpenBack.destroy(); // 销毁 flv.js 播放器实例
        that.myPlayerOpenBack = null; // 将 myPlayerOpenBack 设置为 null
        that.isVideoShow = false;
      }
      if (flvjs.isSupported()) {
        var videoElement = document.getElementById("videoElement");
        var mediaDataSource = {
          cors: true,
          hasAudio: false,
          hasVideo: true,
          isLive: false,
          type: "flv",
          url: that.linVideoUrl, // 替换为你的 FLV 视频链接
        };
        that.myPlayerOpenBack = flvjs.createPlayer(mediaDataSource, {
          enableStashBuffer: false,
          stashInitialSize: 128 * 1024,
          autoCleanupSourceBuffer: true,
          maxBufferLength: 30,
          maxMaxBufferLength: 60,
          maxBufferSize: 5 * 1024 * 1024,
          maxBufferHole: 0.3,
          lowBufferWatchdogPeriod: 0,
        });
        that.myPlayerOpenBack.attachMediaElement(videoElement);
        that.myPlayerOpenBack.load();
        setTimeout(() => {
          that.myPlayerOpenBack.play();
          that.isVideoShow = true;
        }, 100);
      } else {
        that.$message.error("视频加载失败");
      }
    },
    // 开始播放
    handlePlay() {
      this.myPlayerOpenBack.play();
      this.playStatus = "play";
    },
    // 暂停播放
    handlePause() {
      this.myPlayerOpenBack.pause();
      this.playStatus = "pause";
    },

    // 全屏播放
    handleFullscreen() {
      if (this.isFullscreen) {
        this.$refs.videoDomBox.classList.remove("fullscreen");
        this.isFullscreen = false;
      } else {
        console.log(this.$refs.videoDomBox, "播放器处于全屏模式");
        this.$refs.videoDomBox.classList.add("fullscreen");
        this.isFullscreen = true;
      }
    },
    // 关闭弹框并重置数据
    onCancel() {
      this.$emit("update:dialogVisibleUse", false);
    },
  },
  beforeDestroy() {
    if (this.myPlayerOpenBack) {
      this.myPlayerOpenBack.destroy();
    }
  },
};
</script>

<style scoped lang="scss">
.vjs-error-display {
  display: none;
}

.custom-error-message {
  display: none;
  position: absolute;
  top: 46%;
  left: 46%;
  height: 50px;
  width: 158px;
  z-index: 9999;
  color: #fff;
  background: url("../../../../assets/video/caution.png");
  background-size: 50px 50px;
  background-repeat: no-repeat;
  padding-left: 56px;
  padding-top: 15px;
}
// --------------承载它的最小宽度950px----------------
// 否则可能会导致计算不准确，目前没时间捣鼓监听dom的跟新实时计算
.back-container {
  // overflow-x: scroll;
  display: flex;
  flex-direction: column;
  align-items: center;
  .online-right {
    min-width: 920px;
    box-sizing: border-box;
    height: 600px;
    background: #ffffff;
    border-radius: 4px;
    display: flex;
    .playback-content {
      width: 100%;
      .video-dom {
        height: 100%;
        position: relative;
        #videoElement {
          width: 100%;
          height: 100%;
          object-fit: fill !important;
        }
        .video-title {
          z-index: 999;
          position: absolute;
          bottom: 0;
          height: 64px;
          width: 100%;
          background-color: rgba(0, 0, 0, 0.5);
          display: flex;
          justify-content: space-between;
          align-content: center;
          .l-t {
            margin-left: 30px;
            .el-dropdown-link {
              height: 64px;
              line-height: 64px;
              color: #fff;
              font-weight: 400;
              font-size: 24px;
              ::v-deep .el-icon-arrow-down {
                font-size: 22px;
                margin-left: 12px;
              }
            }
            .el-dropdown-menu {
              background-color: rgba(0, 0, 0, 0.5);
            }
            ::v-deep .el-dropdown-menu__item {
              line-height: 29px !important;
              padding: 3px 27px !important;
              font-size: 24px !important;
            }
          }
          .r-t {
            display: flex;
            align-items: center;
            img {
              width: 36px;
              height: 36px;
              margin-right: 22px;
              cursor: pointer;
            }
          }
        }
      }
      .fullscreen {
        width: 100vw;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
      }
      // 自定义进度条
      .video-line {
        display: flex;
        width: 100%;
        margin: 30px auto;
        ul:first-child > li {
          border-top-left-radius: 10px;
          border-bottom-left-radius: 10px;
        }
        ul:last-child > li {
          border-top-right-radius: 10px;
          border-bottom-right-radius: 10px;
        }
        .same-btn {
          display: flex;
          width: 100%;
          .li-btn {
            cursor: pointer;
            width: 95%;
            height: 14px;
            background-color: #e5e5e5;
            box-sizing: border-box;
            text-align: center;
            line-height: 80px;
            font-size: 18px;
            color: #999999;
          }
          .active {
            background-color: #307eff;
          }
        }
      }
    }
  }
  .dialog-footer {
    margin-top: 20px;
  }
}
</style>
